<template>
  <view class="">
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{i18n['充值']}}</block>
    </fu-custom>
	  <!-- 选择金额 start -->
	  <view class="cz_cont">
	    <text class="tx_money  text-bold">{{i18n['充值金额']}}</text>
	    <view class="item_main">
	      <view
	        class="list"
	        :class="act_type == index?'act':''"
	        @click="get_money(item,index)"
	        :data-index="index"
	        v-for="(item,index) in moneyData"
	        :key="index"
	      >
	        <text class="add_money">{{item.add_money}}{{i18n['元']}}</text>
          <!-- <text class="money">{{i18n['售价']}} {{item.money}}{{i18n['元']}}</text> -->
	      </view>
	    </view>
	  </view>
	  <!-- 选择金额 end -->

    <!-- 充值信息 start -->
    <view class="tx_cont" >
      <text class="tx_money">{{i18n['自定输入金额']}} </text>
      <view class="tx_box">
        <text>¥</text>
        <input type="number" value=""  placeholder-class="placeholderClass" @input="handleChange" placeholder="0.00" v-model="change_money" />
      </view>
    </view>
    <!-- 充值信息 end -->

	<!-- 充值方式 start -->
	<view>
		<view class="model_content">
			<view class="pay">{{i18n['选择支付方式']}}</view>
		</view>
		<view class="cu-list menu">
			<radio-group class="block" @change="RadioChange">
        <view class="cu-item cu-form-group" @click="handleSelect(2)">
					<view class="title wxpay">{{i18n['微信']}}</view>
					<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
					<image class="image" v-if="acc_type=='2' "  :src="imgWechatUrl+'/wallet/checked.png'" mode="aspectFill"></image>
          <image class="image" v-else :src="imgWechatUrl+'/wallet/unchecked.png'" mode="aspectFill"></image>
            <!-- <radio color="#FF5737" :class="acc_type == '1' ? 'checked' : ''" :checked="acc_type == '1' ? true : false" value="1"></radio> -->
					</view>
				</view>
         <!-- #ifndef MP-WEIXIN -->
        <view class="cu-item cu-form-group" @click="handleSelect(1)">
        	<view class="title alipay"> {{i18n['支付宝']}}</view>
        	<view class="content" style="display: flex;justify-content: space-between;align-items: center;">
        	<image class="image" v-if="acc_type=='1' " :src="imgWechatUrl+'/wallet/checked.png'" mode="aspectFill"></image>
          <image class="image" v-else :src="imgWechatUrl+'/wallet/unchecked.png'" mode="aspectFill"></image>
            <!-- <radio color="#FF5737" :class="acc_type == '2' ? 'checked' : ''" :checked="acc_type == '2' ? true : false" value="2"></radio> -->
        	</view>
        </view>
        <!-- #endif -->


			</radio-group>
		</view>
	</view>
	<!-- 充值方式 end -->

    <!-- 立即充值按钮 -->
    <view class="tx_btn" @click="payFn">
      {{i18n['充值']}}
    </view>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
/**
 * @author 刘畅
 */
  export default {
    data() {
      return {
				imgWechatUrl: this.imgWechatUrl,
        change_money: '',    // {String} 充值金额
        acc_type: 1,         // {Number} 充值方式 1:支付宝；2：微信；
        act_type: -1,        // {Number} 选择充值的金额
        wxChannel: '',       // {String} 获取微信服务供应商
        aliChannel: '',      // {String} 获取阿里服务供应商
        moneyData: [],       // {Array.<Object>} 选择充值那些金额
        showPopup: false,    // {Boolean} 弹窗是否显示
        is_show: true,       // {Boolean}
        product_id: 0,       // {Number} 选择充值金额的产品id，0：自定义；
        money: ''            // {String} 充值金额
      };
    },
    /**
     * @function
     * @description 获取系统信息，获取包支持的服务商信息
     */
    onLoad(options) {
      this.setNavigationBarTitle(this.i18n['充值'])
      let that = this;
      uni.getProvider({
        service: 'payment',
        success: function(res) {
          let provider = res.provider;
          provider.forEach(item => {
            if (item == 'wxpay') {
              that.wxChannel = item;
            } else {
              that.aliChannel = item;
            }
          })
        }
      });
      this.getDetali()
      if (uni.getSystemInfoSync().platform == 'ios') {
        this.is_show = false
      } else {
        this.is_show = true
      }
    },
    onNavigationBarButtonTap(e) {
      this.showPopup = true
    },
    methods: {
      handleSelect(value){
        this.acc_type = value
      },
      /**
       * @function
       * @description 获取充值规则
       * @property {Number} group -【规则分组。类型：int(11) unsigned，默认0通用，1 IOS】
       */
      getDetali() {
        this.$api.get(global.apiUrls.getRechargeRule, {
          group: 0,
        }).then(res => {
          console.log(res)
          this.moneyData = res.data.data
        })
      },
      /**
       * @event 手动输入
       * @description 手动输入充值金额
       */
      handleChange() {
        this.act_type = -1;
        this.product_id = 0;
        console.log(this.change_money);
      },
      /**
       * @description 不知道有啥用，但是不敢删
       */
      confirm: async function() {
        let _self = this
        if (_self.checked) {
          //下单
          if (_self.payType == 'wxpay') {
            _self.requestPayment('wxpay', _self.order_sn)
            uni.showLoading({
              title: _self.i18n['请稍等，正在发起支付']
            });
          } else if (_self.payType == 'alipay') {
            _self.requestPayment('alipay', _self.order_sn)
            uni.showLoading({
              title: _self.i18n['请稍等，正在发起支付']
            });
          }
        }
      },
         /**
       * @function
       * @description 支付成功
       * @param {Object} sn - 支付成功
       */
       paySuccess(sn) {
         this.$message.success(this.i18n['支付成功'] );
         setTimeout(()=>{
           uni.navigateBack({
              delta: 1
           });
         },800)

        // if (this.order_type == 12) {
        //   uni.redirectTo({
        //     url: '/pages/integral/integralgoods/exchange-success/index',
        //     order_sn: sn,
        //   })

        // } else {
        //   this.$urouter.redirectTo({
        //     url: '/pages/order/order-process/pay-success/index',
        //     params: {
        //       order_sn: sn,
        //       order_type: 3,
        //       pay_type: this.payType
        //     }
        //   })
        // }
      },
      /**
       * @event
       * @description 点击选择充值金额
       * @param {Obejct} item - 点击的哪一项的详细信息
       * @param {Number} index - 点击的哪一项的序号
       */
      get_money(item, index) {
        this.act_type = index;
        this.change_money = item.money;
        this.money = item.money;
        this.product_id = item.id;
      },
      /**
       * @event
       * @description 切换充值方式
       */
	  RadioChange(e){
		  this.acc_type = e.detail.value;
	  },
      // get_type(e) {
      //   this.acc_type = e.currentTarget.dataset.index;
      // },
      /**
       * @event
       * @description 点击立即充值按钮
       * @property {Obejct} arr - 请求接口携带的参数
       * @property {Number} arr.order_type - 【订单类型。类型：int(11) unsigned】1 ：'现金充值'，2：'虚拟币充值'，3 ：'商城交易'
       * @property {String} arr.pay_type - 【支付渠道。类型：varchar(256)】wxpay:微信，alipay:支付宝，appleiap:苹果内购
       * @property {String} arr.payable_money - 【应付金额。类型：decimal(10,2)】选填，也可以服务器计算
       * @property {String} arr.order_info - 【商品订单等订单的附加信息。类型：字符串object】
       * @property {String} arr.coupon_id - 【我使用的优惠券id。类型：int(10) unsigned】
       */
      payFn() {
        console.log(this.change_money)
        let {
          acc_type,
          change_money,
          money
        } = this;
       if(this.product_id == 0){
          if (!change_money) return this.$message.info(this.i18n['请输入充值金额']);
          if (change_money < 1) return this.$message.info(this.i18n['输入金额不能小于1元']);
       }
        let data = {
          order_type: 1,
          pay_type: acc_type == 1 ? 'alipay' : 'wxpay',
          order_money: '',
          product_id:this.product_id
        }
        // if (this.is_show) {
        //   // 订单实际付款金额是售价金额
        //   arr.order_money = money;
        // } else {
        //   arr.product_id = this.product_id;
        // }
        // product_id 为0 自定义商品金额
        if(data.product_id != 0){
          data.order_money = money;
        }else{
          data.order_money = change_money;
        }
        console.log(data);
        this.$api.post(global.apiUrls.postAddOrder, data)
          .then(res => {
            console.log(res);
            if(res.data.code == 1){
              let sn = res.data.data.order_sn;
              if(this.acc_type == 1){
                this.$api.post(global.apiUrls.alipayOrder, {
                  order_sn: sn,
                }).then(res => {
                  console.log("支付宝支付回调", res);
                  if (res.data.code == 1) {
                    uni.requestPayment({
                      provider: 'alipay',
                      orderInfo: res.data.data,
                      success: (e) => {
                        if (e.errMsg == 'requestPayment:ok') {
                          this.paySuccess(sn);
                        }
                      },
                      fail: (e) => {
                        if (e.errMsg == 'requestPayment:fail canceled') {
                          this.$message.info(this.i18n['取消支付']);
                        } else {
                          this.$message.info(this.i18n['支付失败,请稍后重试']);
                        }
                      },
                      complete: () => {
                        this.loading = false;
                      }
                    })
                  } else {
                    this.loading = false;
                    this.$message.info(this.i18n["订单无效，支付失败!"]);
                  }
                }).catch(err => {
                  this.loading = false;
                  console.log("支付宝支付失败 => ", err);
                })

              }else{
                this.$api.post(global.apiUrls.wxpayOrder, {
                  order_sn: sn,
                  // #ifdef APP-PLUS
                  wxpaytype: 'apppay',
                  // #endif
                  // #ifdef MP-WEIXIN
                  wxpaytype: 'minipay',
                  // #endif
                }).then(res => {
                  console.log("微信支付回调", res);
                  if (res.data.code == 1) {
                    let data = res.data.data;
                    uni.requestPayment({
                      provider: 'wxpay',
                      // #ifdef MP-WEIXIN
                      timeStamp: data.timeStamp,
                      nonceStr: data.nonceStr,
                      package: data.package,
                      signType: data.signType,
                      paySign: data.paySign,
                      // #endif
                      // #ifdef APP-PLUS
                      orderInfo: data,
                      // #endif
                      success: (e) => {
                        console.log('success', e)
                        if (e.errMsg == 'requestPayment:ok') {
                          this.paySuccess(sn);
                        }
                      },
                      fail: (e) => {
                        console.log('fail', e);
                        // #ifdef APP-PLUS
                        let failMsg = 'requestPayment:fail canceled';
                        // #endif
                        // #ifndef APP-PLUS
                        let failMsg = 'requestPayment:fail cancel';
                        // #endif
                        if (e.errMsg == failMsg) {
                            this.$message.info(this.i18n['取消支付']);
                        } else {
                           this.$message.info(this.i18n['支付失败,请稍后重试']);
                        }

                      },
                      complete: () => {
                        this.loading = false;
                      }
                    });
                  } else {
                    this.loading = false;
                    this.$message.info(this.i18n["订单无效，支付失败!"]);
                  }
                }).catch(err => {
                  this.loading = false;
                  console.error('微信支付失败 =>', err);
                })
              }
            }
          })
          .catch(e => {
            console.log(e)
             this.$message.info(this.i18n["网络繁忙,请稍后重试"]);
          })
      }
    },

  };
</script>

<style lang="scss">
  .money {
    font-size: 24rpx;
    color: #999;
  }
  // input placeholder 样式 start
  .placeholderClass {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #BFBFBF;
  }

  .tx_btn {
    width: calc(100% - 60upx);
    height: 88upx;
    background: $bgtheme;
    border-radius: 44upx;
    font-size: 32upx;
    color: white;
    line-height: 88upx;
    text-align: center;
    position: fixed;
    bottom: 60upx;
    left: 30upx;
  }

  // 选择金额 start
  .cz_cont {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: white;

    .item_main {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 32rpx;
      margin-top: 24rpx;
      width:100%;
      align-content: space-around;

      .list {
        width: 32%;
        flex: none;
        text-align: center;
        height: 120rpx;
        border: 1rpx solid #CBCBCB;
        border-radius: 8rpx;
        margin-bottom: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-right: 2%;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1A1A1A;
        }

        .act {
          border: 2rpx solid #FF6464;
          border-radius: 8rpx;
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: 400 ;
          color: #FF6464 !important;
          position: relative;
        .money {
          font-size: 24rpx;
          color: #999;
        }
        &::after{
          width: 34rpx;
          height: 34rpx;
          background: url($IMG_WECHAT_URL+'/wallet/g.png');
          background-size: 100% 100%;
          content: ' ';
          position: absolute;
          top: 0;
          right: 0;
        }
      }

      .list:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  // 选择金额 end

  .tx_money {
    font-size: 28upx;
    display: block;
    margin-top: 30upx;
    padding: 0 30upx;
  }

  // 充值方式 start
  .tx_main {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 0 30upx 30upx 30upx;
    background: white;
    border-top: 10px solid #f2f2f2;

    .payMain {
      display: flex;
      justify-content: space-between;
    }

    .tx_choose {
      font-size: 30upx;
      color: #333;
      line-height: 90upx;
      display: block;
    }

    .tx_mainBox {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46%;
      height: auto;
      overflow: hidden;
      border-radius: 10rpx;
      border: 1px solid #999;


      .tx_name {
        display: block;
        line-height: 100upx;
        font-size: 30upx;
        color: #333;
        text-align: center;
      }


      image {
        width: 50upx;
        height: 50upx;
        margin-right: 20upx;
      }
    }
  }
  // 充值方式 end

  // 充值信息 start
  .tx_cont {
    width: 100%;
    height: auto;
    overflow: hidden;
    background: white;
    margin-top: 10rpx;

    .all_out {
      &:after {
        border: none;
      }

      display: inline-block;
      background: none;
      font-size: 24upx;
    }


    .tx_box {
      width: 100%;
      height: auto;
      overflow: hidden;
      padding: 0 30upx 20upx 30upx;
      margin-top: 20upx;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        height: 1px;
        background: #EEEEEE;
        left: 30upx;
        right: 0;
        bottom: 0;
        transform: scaleY(0.5);
      }

      text {
        display: block;
        font-size: 40upx;
        color: #333;
        font-weight: bold;
        float: left;
        line-height: 70upx;
      }

      input {
        display: block;
        width: auto;
        height: 70upx;
        font-size: 32upx;
        line-height: 70upx;
        padding: 0 30upx;
      }
    }
  }
  // 充值信息 end

  .fu-flex-center {
    background: $uni-text-color-inverse;
  }

  .model_content {
  	height: auto;
  	padding: 0 30upx;
  	// margin-top: 20upx;
  	background: #ffffff;
  }
  .pay {
  	font-size: 32upx;
  	height: 80upx;
  	line-height: 80upx;
  }
  .cu-list.menu>.cu-item {
  	padding: 0 !important;
  }

  .cu-list.menu>.cu-item.arrow:before {
  	display: none !important;
  }
  .wxpay {
  	background: url($IMG_WECHAT_URL+'/wallet/weixin.png');
  	padding-left: 80upx;
  	background-size: contain;
  	background-repeat: no-repeat;
  }

  .alipay {
  	background: url($IMG_WECHAT_URL+'/wallet/zfb.png');
  	padding-left: 80upx;
  	background-size: contain;
  	background-repeat: no-repeat;
  }
  .image{
    height:40rpx;
    width:40rpx;
  }
  .cu-form-group+.cu-form-group{
    border-top: none;
  }
</style>
